{extends file='home/layout.tpl'}
{block name=head}<link rel="stylesheet" href="/static/css/swiper.min.css" />{/block}
{block name=body}
<!-- 轮播图片部分 -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="swiper-download-first">
                <div class="swiper-download-first-left-qr">
                    <div class="qrcode-img-box"></div>
                    <div class="qrcode-arrow"></div>
                </div>
                <div class="swiper-download-first-left">
                    <div class="swiper-download-first-left-top">
                        <img src="/static/img/download/down_font_first.png">
                    </div>
                    <div class="swiper-download-first-left-bottom mobile_qr" style="display:none;">
                        <div class="swiper-download-first-button-font">
                             <div class="swiper-download-first-button-top">扫码下载</div>
                        </div>

                        <div class="swiper-download-first-button-ul">
                            <a href="/home/download_android" class="download-android-apk" target="_blank">
                                <ul class="swiper-download-first-button-ul-first">
                                    <li class="download-android-img"></li>
                                    <li class="download-font">Android</li>
                                    <li class="download-font">V{$android_version}</li>
                                </ul>
                            </a>
                            <a href="/home/download_ios" class="download-ios-apk" target="_blank">
                                <ul class="swiper-download-first-button-ul-second">
                                    <li class="download-ios-img"></li>
                                    <li class="download-font">iOS</li>
                                    <li class="download-font">V{$ios_version}</li>
                                </ul>
                            </a>
                        </div>
                    </div>
                    <div class="swiper-download-first-left-bottom-downumber">
                        <div>已下载</div>
                        <div class="mobilednumber"></div>
                        <div>次</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="swiper-download-second">
                <div class="swiper-download-second-left">
                    <div class="swiper-download-second-left-top">
                        <img src="/static/img/download/down_font_second.png">
                    </div>
                    <div class="swiper-download-second-left-bottom" style="display:none;">
                        <a href="/home/download_reader" target="_blank">
                            <div class="swiper-download-second-button-top">立即下载</div>
                            <div class="swiper-download-second-button-bottom">V{$reader_version}</div>
                        </a>
                    </div>
                    <div class="swiper-download-second-left-bottom-downumber">
                        <div>已下载</div>
                        <div class="second_mobilednumber"></div>
                        <div>次</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="swiper-download-third">
                <div class="swiper-download-third-left">
                    <div class="swiper-download-third-left-top">
                        <img src="/static/img/download/down_font_third.png">
                    </div>
                    <div class="swiper-download-third-left-bottom" style="display:none;">
                        <a href="/home/download_client" target="_blank">
                            <div class="swiper-download-third-button-top">立即下载</div>
                            <div class="swiper-download-third-button-bottom">V{$pc_version}</div>
                        </a>
                    </div>
                    <div class="swiper-download-third-left-bottom-downumber">
                        <div>已下载</div>
                        <div class="third_mobilednumber"></div>
                        <div>次</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 轮播图片部分 -->

<!-- banner的焦点 -->
<div class="swiper-pagination"></div>
<!-- banner的焦点 -->

<!-- 行展示 -->
<div class="row-contianer main-rt">
    <div class="row" id="active_select">
        <div class="download_center" data-index="0">
            <dl>
                <dt>
                    <a href="javascript:;">
                        <img src="/static/img/download/down_mobile.png">
                    </a>
                </dt>
                <dd class="download_center_dd_first">易控手机移动端</dd>
                <dd class="download_center_dd_second">IOS/Andriod</dd>
            </dl>
        </div>
        <div class="download_center" data-index="1">
            <dl>
                <dt>
                    <a href="javascript:;">
                        <img src="/static/img/download/down_read_gred.png">
                    </a>
                </dt>
                <dd class="download_center_dd_first">易控查阅器</dd>
                <dd class="download_center_dd_second">windows</dd>
            </dl>
        </div>
        <div class="download_center" data-index="2">
            <dl>
                <dt>
                    <a href="javascript:;">
                        <img src="/static/img/download/down_pc_gred.png">
                    </a>
                </dt>
                <dd class="download_center_dd_first">易控PC端</dd>
                <dd class="download_center_dd_second">windows</dd>
            </dl>
        </div>
    </div>
</div>

<!-- 行展示 -->
{/block}
{block name=footer}
    <!-- Swiper JS -->
    <script src="/static/js/swiper/swiper.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery/jquery.qrcode.min.js"></script>
    <script>
        {literal}
        /*firfex不支持animate动画的backgroundPosition属性的解决办法*/
        (function($) {
            var div = document.createElement('div'),
            rposition = /([^ ]*) (.*)/;

            if(div.style.backgroundPositionX !== '') {
                $(['X', 'Y']).each(function( i, letter ) {
                    var property = 'backgroundPosition' + letter,
                        isX = letter == 'X';
                    $.cssHooks[property] = {
                        set: function(elem, value) {
                            var current = elem.style.backgroundPosition;
                            elem.style.backgroundPosition = (isX? value + ' ' : '' ) + (current? current.match(rposition)[isX+1] : '0') + (isX? '' : ' ' + value);
                        },
                        get: function(elem, computed) {
                            var current = computed?
                                $.css(elem, 'backgroundPosition') :
                                elem.style.backgroundPosition;
                            return current.match(rposition)[!isX+1];
                        }
                    };
                    $.fx.step[property] = function(fx) {
                        $.cssHooks[property].set(fx.elem, fx.now + fx.unit);
                    }
                });
            }
            div = null;
        })(jQuery);
        $(function(){
            //下图标图片名称
            var button_gred_img = ['down_mobile', 'down_read', 'down_pc'];

            //修改按钮背景图
            function changeButtonImg(number)
            {
                var imgsrc = "/static/img/download/";
                $(".download_center dl dt img").each(function(index, domEle){
                    $(this).attr("src", imgsrc+button_gred_img[index]+"_gred.png");
                });
                $(".download_center dl dt img").eq(number).attr("src", imgsrc+button_gred_img[number]+".png");
            }

            function autoFixHeight(){
                var w = $("body").width();
                var h = w<1250?w/2:644;
                $(".swiper-wrapper").css({height:h});
                /*$(".row-contianer").trigger("resize",[w]);*/
            }
            autoFixHeight();
            var swiper = new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                paginationClickable: true,
                //autoplay : 10000,
                loop:true,
                //loopedSlides:0,
                //slidesPerView:1,
                autoplayDisableOnInteraction: false,
                onSlideChangeEnd:function() {
                    changeButtonImg(swiper.activeLoopIndex);
                }
            });
            //小圆圈
            $(".swiper-pagination").on('click',function(){
                var active_select = swiper.activeLoopIndex;
                changeButtonImg(active_select);
            });
            //中间栏
            $(".download_center").bind('click',function(){
                var select_index = $(this).attr("data-index");
                swiper.swipeTo(select_index, 500, false);   //跳到点击模块
                changeButtonImg(select_index);
            });
            function request(paras){
                var url = location.href;
                var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
                var paraObj = {}
                for (i = 0; j = paraString[i]; i++){
                    paraObj[j.substring(0,j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
                }
                var returnValue = paraObj[paras.toLowerCase()];
                if(typeof(returnValue)=="undefined"){
                    return "";
                }else{
                    return returnValue;
                }
            }
            //从受控下载页跳转来时显示第二页
            if(request('type') != '') {
                swiper.swipeTo(1, 500, false);
                changeButtonImg(1);
            }

            //swiper.reInit();
            $(window).resize(function(){
                autoFixHeight();
                swiper.resizeFix();
            });
            //二维码
            $(".mobile_qr").mousemove(function(){
                $(".swiper-download-first-left-qr").css("display","block");
            });
            $(".mobile_qr").mouseleave(function(){
                $(".swiper-download-first-left-qr").css("display","none");
            });
            var qrcode_size = 0,w_width = $(document).width();
            //通过尺寸设置二维码大小
            if(w_width >= 1024) {
                qrcode_size = 140;
            } else if(w_width < 1024 && w_width >= 768) {
                qrcode_size = 120;
            } else if(w_width < 768 && w_width >= 640) {
                qrcode_size = 100;
            } else if(w_width < 640 && w_width >= 480) {
                qrcode_size = 80;
            } else if(w_width < 480 && w_width >= 320) {
                qrcode_size = 60;
            } else {
                qrcode_size = 40;
            }

            var qrurl = window.location.protocol + "//" + window.location.host+'/home/download_mobile';
            //二维码部分
            $(".qrcode-img-box").qrcode({
                render	: (!!window.ActiveXObject&&!!document.documentMode)?"table":"canvas",
                text	: qrurl,
                background : "#ffffff",    //背景颜色
                background: "#ffffff",    //背景颜色
                size: qrcode_size
            });

            $(window).resize(function(){
                document.location.reload();
            });

            $(".mobile_qr").click(function(){
                $(".swiper-download-first-left-qr").fadeOut("fast");
            });
            $(".mobile_qr").click(function(){
                $(".swiper-download-first-left-qr").fadeIn("fast");
            });
            $(".qrcode-img-box").click(function(){
                return false;
            });

            //android小图片及字体修改
            $(".download-android-apk").mouseover(function(){
                $(".download-android-img").css("background-image","url(/static/img/download/android.png)");
                $(this).find(".download-font").css("color","#fcfcfc")
            });
            $(".download-android-apk").mouseleave(function(){
                $(".download-android-img").css("background-image","url(/static/img/download/android_gred.png)");
                $(this).find(".download-font").css("color","#FFB0C3")
            });

            //ios小图片及字体修改
            $(".download-ios-apk").mouseover(function(){
                $(".download-ios-img").css("background-image","url(/static/img/download/iphone.png)");
                $(this).find(".download-font").css("color","#fcfcfc")
            });
            $(".download-ios-apk").mouseout(function(){
                $(".download-ios-img").css("background-image","url(/static/img/download/iphone_gred.png)");
                $(this).find(".download-font").css("color","#FFB0C3")
            });

            //显示下载部分
            function shownum(obg,x){
              var num = x;
              var numlen = String(num).length;
              var objlen = $("."+obg).length;

              for( var i = 0;i < numlen; i++){
                var obg2;
                //轮播图循环模式下会出现下载部分显示被分割现象，故分成2部分处理
                if($("."+obg).eq(0).find("i").length <= i){
                  obg2 = $("<i></i>").appendTo("."+obg).eq(0);
                }

                obg2 = $("."+obg).eq(0).find("i").eq(i);

                var nownum = String(num).charAt(i);
                var y;
                if(nownum == "%"){
                  y = -10*30;
                  $(obg2).addClass("num100");
                }else if(nownum == ","){
                  y = -12*30;
                  $(obg2).css("width","13px");
                }else if(nownum == "."){
                  y = -11*30;
                  $(obg2).css("width","13px");
                }else{
                  y = -parseInt(nownum)*30;
                }
                $(obg2).stop();
                //$(obg2).animate({backgroundPosition :'(-459px '+String(y)+'px)' }, 'slow','swing');
                $(obg2).animate({
                    backgroundPositionX: "0",
                    backgroundPositionY: String(y)+"px",
                    backgroundPosition: "0 "+String(y)+"px"
                }, "slow", 'swing');

                if(objlen > 1) {
                    var obg3;
                    if($("."+obg).eq(1).find("i").length <= i){
                      obg3 = $("<i></i>").appendTo("."+obg).eq(1);
                    }

                    obg3 = $("."+obg).eq(1).find("i").eq(i);

                    $(obg3).stop();
                    //$(obg2).animate({backgroundPosition :'(0 '+String(y)+'px)' }, 'slow','swing');
                    $(obg3).animate({
                        backgroundPositionX: "0",
                        backgroundPositionY: String(y)+"px"
                    }, "slow", 'swing');
                }
              }
            }
            var str="abcdeg";
            //下载次数拼装
            function reversedemo(str){
              var str2 = "";
              for(var i = 0; i < str.length; i++){
                str2 += str.charAt(str.length - i);
              }
              str2 += str.charAt(0);
              return str2;
            }

            function numstring(num){
              num = reversedemo(String(num));
              var len = String(num).length;
              var newnumstring = "";
              for(var i = 0; i < len; i++){
                if(i%4 == 3){
                  if(i == len - 1){
                    newnumstring = newnumstring + num.charAt(i);
                  }else{
                    if(i%8 == 7){
                      newnumstring = newnumstring + num.charAt(i)+".";
                    }else{
                      newnumstring = newnumstring + num.charAt(i)+",";
                    }
                  }
                }else{
                  newnumstring = newnumstring+num.charAt(i);
                }
                if(i == len-1){
                  return reversedemo(newnumstring);
                }
              }
            }

            /**
             * 获取下载数
             */
            var mobiledownNumber = 0,readerdownNumber = 0,pcdownNumber = 0;
            $.ajaxSettings.async = false;
            function getNumber() {
                $.getJSON('/home/stat', function(data){
                    if(data.error_code == 0){
                        mobiledownNumber = data.extra_params.data.mobile;
                        readerdownNumber = data.extra_params.data.reader;
                        pcdownNumber = data.extra_params.data.pc;
                    } else {
                        $(".swiper-download-first-left-bottom-downumber").hide();
                        $(".swiper-download-second-left-bottom-downumber").hide();
                        $(".swiper-download-third-left-bottom-downumber").hide();
                    }
                });
            }
            getNumber();

            shownum('mobilednumber', numstring(mobiledownNumber));
            shownum('second_mobilednumber', numstring(readerdownNumber));
            shownum('third_mobilednumber', numstring(pcdownNumber));
            //5秒跳动一次
            var simuIP = window.setInterval(function() {
                getNumber();
                shownum('mobilednumber', numstring(mobiledownNumber));
                shownum('second_mobilednumber', numstring(readerdownNumber));
                shownum('third_mobilednumber', numstring(pcdownNumber));
            }, 5000);
        });

        //页面刷新时防止轮播图同时显示在一起而做的处理
        $(document).ready(function(){
            $(".swiper-download-first").show();
            $(".swiper-download-second").show();
            $(".swiper-download-third").show();
            $(".swiper-download-first-left-bottom").show();
            $(".swiper-download-second-left-bottom").show();
            $(".swiper-download-third-left-bottom").show();
            $(".swiper-download-first-left-bottom-downumber").show();
            $(".swiper-download-second-left-bottom-downumber").show();
            $(".swiper-download-third-left-bottom-downumber").show();
        });
        {/literal}
    </script>
{/block}
